import HandleBtn from '@/components/HandleBar/btn';
import Tabs, { TabsProps } from '@/components/Tabs';
import { statisticIncomeV2ControllerExportReport as exportReport } from '@/services/ess/statisticIncomeV2';
import { downloadFetch } from '@/utils/downloadFile';
import { useIntl, useSearchParams } from '@umijs/max';
import { Radio, Space } from 'antd';
import React, { useRef, useState } from 'react';
import Chart from './components/EnergyStorageRevenueChart';
import List from './components/EnergyStorageRevenueList';

const Income = () => {
  const intl = useIntl();
  const [searchParams] = useSearchParams();
  const listRef = useRef(null);
  const [radioValue, setRadioValue] = useState('list');
  const [activeKey, setActiveKey] = useState(searchParams.get('tab') ?? 'day');
  const items: TabsProps['items'] = [
    {
      key: 'day',
      label: `${intl.formatMessage({ id: 'electricityPrice.dailyEnergyStorageRevenue' })}`,
      children:
        radioValue === 'list' ? (
          <List dateType={'day'} ref={listRef} />
        ) : (
          <Chart dateType={'date'} />
        ),
    },
    {
      key: 'month',
      label: `${intl.formatMessage({ id: 'electricityPrice.monthlyEnergyStorageRevenue' })}`,
      children:
        radioValue === 'list' ? (
          <List dateType={'month'} ref={listRef} />
        ) : (
          <Chart dateType={'month'} />
        ),
    },
    {
      key: 'year',
      label: `${intl.formatMessage({ id: 'electricityPrice.annualEnergyStorageRevenue' })}`,
      children:
        radioValue === 'list' ? (
          <List dateType={'year'} ref={listRef} />
        ) : (
          <Chart dateType={'year'} />
        ),
    },
  ];

  const exportIncomeReport = () => {
    downloadFetch(exportReport, listRef?.current?.getSearchValues?.());
  };
  const ToolBarRender: React.FC = ({}) => {
    return (
      <>
        <Space>
          <div>
            <Radio.Group
              value={radioValue}
              onChange={(e) => {
                setRadioValue(e.target.value);
              }}
              buttonStyle="solid"
              className="global-group-radio-button"
            >
              <Radio.Button value={'list'}>
                {intl.formatMessage({ id: 'statistics.common.list' })}
              </Radio.Button>
              <Radio.Button value={'chart'}>
                {intl.formatMessage({ id: 'statistics.common.chart' })}
              </Radio.Button>
            </Radio.Group>
          </div>
          {radioValue === 'list' && (
            <HandleBtn
              key="export"
              handleType="export"
              onClick={() => {
                exportIncomeReport();
              }}
            >
              {intl.formatMessage({ id: 'statistics.common.export' })}
            </HandleBtn>
          )}
        </Space>
      </>
    );
  };
  return (
    <>
      <Tabs
        activeKey={activeKey}
        onChange={setActiveKey}
        destroyInactiveTabPane={true}
        items={items}
        tabBarExtraContent={<ToolBarRender />}
      ></Tabs>
    </>
  );
};

export default Income;
